<template>
  <div class="home-container">
    <!-- 顶部导航 -->
    <div class="nav-header">
      <div class="nav-top">
        <van-nav-bar :border="false">
          <van-icon
            slot="left"
            name="https://b.yzcdn.cn/vant/icon-demo-1126.png"
            size="24"
          />
          <div slot="left" class="shopTitle">
            <p class="shop-name">
              新佳宜.麓谷1号分店<van-icon
                name="arrow-down"
                size="18"
                color="#000"
              />
            </p>
            <p class="shop-time">配送时间:9:00 - 21:00</p>
          </div>
          <van-icon
            slot="right"
            :name="isStar ? 'star' : 'star-o'"
            class="isStar"
            size="24"
            @click="onStarClick"
          />
        </van-nav-bar>
      </div>
      <!-- 搜索商品 -->
      <div class="nav-bottom">
        <van-search shape="round" placeholder="搜索商品" background="#fff" />
      </div>
      <!-- 店铺信息 -->
      <shop-info
        class="shop-info "
      ></shop-info>
    </div>
    <!-- 左侧导航栏 -->
    <goods-list> </goods-list>
    <!-- 底部结算 -->
    <shop-footer />
    <!-- 菜单按钮 -->
    <div :class="{ hidden: isHidden, menu: true }" @click="onMenuClick">
      菜单
    </div>
    <!-- 菜单列表 -->
    <div class="meun-list" :class="{ hidden: !isHidden }">
      <dl>
        <dt>菜单</dt>
        <dd @click="$router.push('/promotionShop')">分享转发</dd>
        <dd @click="$router.push('/mycart')">购物车</dd>
        <dd @click="$router.push('/shangQua')">我的商圈</dd>
        <dd @click="$router.push('/shangQua')">共享商圈</dd>
        <dd @click="$router.push('/my')">个人中心</dd>
        <dd @click="$router.push('/my/myCollection')">推广赚钱</dd>
        <dd @click="isHidden = false">取消</dd>
      </dl>
    </div>
  </div>
</template>

<script>
import GoodsList from './components/goods-list.vue'
import ShopFooter from './components/shop-footer.vue'
import ShopInfo from './components/shop-info.vue'
import { mapState } from 'vuex'
export default {
  name: 'homeIndex',
  components: { ShopInfo, ShopFooter, GoodsList },
  props: {},
  data() {
    return {
      isHidden: false,
      goodsInfo: [],
      isStar: false
    }
  },
  computed: {
    ...mapState('m_home', ['activeKey'])
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onMenuClick() {
      this.isHidden = true
    },
    onStarClick() {
      this.isStar = !this.isStar
    },
    homeSearch: function () {
      this.$router.push('/myStoress') // 跳转到 共享商圈 页面 （ 周边商铺 ）
    },
    homeIndustry: function () {
      this.$router.replace('/homeIndustry') // 跳转到 homeIndustry 页面 （ 行业 ）
    },
    searchIndex: function () {
      this.$router.replace('/search') // 跳转到 search 页面 （ 周边商铺 ）
    },
    myStoresIndex: function () {
      this.$router.push('/myStoress') // 跳转到 共享商圈 页面 （ 商圈 ）
    },
    searchPage: function () {
      this.$router.replace('/searchPage') // 跳转到 search-search 页面 （ 搜索界面 ）
    }
  }
}
</script>

<style scoped lang="less">
.home-container {
  .header-f {
    position: fixed;
  }
  .nav-header {
    .nav-top {
      p {
        margin: 0 0 0 10px;
      }
      /deep/ .isStar {
        color: #f6a901;
        // background-color: red;
      }
      .shop-name {
        margin-top: 36px;
        font-size: 36px;
        .van-icon {
          margin-left: 2px;
        }
      }
      .shop-time {
        font-size: 12px;
        text-align: left;
        line-height: 28px;
        height: 28px;
      }
    }
  }
  .nav-bottom {
    .van-search {
      padding-bottom: 5px;
      font-size: 36px;
    }
    .van-search__content {
      text-align: center;
      border: 1px solid #02b6fd;
    }
  }
  .van-sidebar {
    .van-sidebar-item {
      padding: 10px;
      text-align: center;
    }
  }
  .hidden {
    display: none;
  }
  .menu {
    position: fixed;
    right: 50px;
    bottom: 200px;
    width: 80px;
    height: 80px;
    font-size: 32px;
    text-align: center;
    line-height: 80px;
    color: #02b6fd;
    background-color: #ffffff;
    border: 2px solid #02b6fd;
    border-radius: 50%;
  }
  .meun-list {
    z-index: 99;
    position: fixed;
    right: 15px;
    bottom: 220px;
    color: #02b6fd;
    // border: 1px solid #02b6fd;
    dl {
      // color: #fff;
      width: 280px;
      margin: 0;
      text-align: center;
      line-height: 60px;
      dt {
        // border-radius: 50%;
        background-color: #02b6fd;
        font-size: 32px;
        color: rgb(250, 26, 26);
      }
      dd {
        border-radius: 5%;
        margin: 0;
        font-size: 30px;
        background-color: #fff;
        border-top: 1px solid #02b6fd;
      }
    }
  }
  .element.style {
    color: unset;
  }
}
.hidden {
  display: none;
}
/deep/.van-nav-bar__content {
  background-color: #02b6fd;
}
.shopTitle {
  font-size: 10px;
  padding-bottom: 30px;
  color: #fff;
}
</style>
